<template>
  <div class="share-box">
    <div class="logo-wp">
      <img
        :src="logoUrl"
        class="logo"
      >
      <img
        src="~assets/share/slogan.png"
        class="slogan"
        @load="onImageLoaded"
      >
    </div>
    <div class="traning-content-box">
      <div class="content-box">
        <div class="content-prompt">
          培/训/内/容
        </div>
        <div class="traning-content">
          {{ traningContent }}
        </div>
      </div>
    </div>
    <img
      src="~assets/share/poster-pic.jpg"
      class="poster-img"
      @load="onImageLoaded"
    >
    <div class="my-info-wp">
      <img
        :src="qrcodeUrl"
        class="qrcode"
      >
      <div class="my-info">
        <h3
          v-if="$route.query.uname"
          class="intro"
        >
          我是{{ $route.query.uname }}
        </h3>
        <h5
          v-if="shareInfo.OrangeKey && userStatus === 1 && $store.state.instInfo.IsScholarInst"
          class="invite-code"
        >
          推荐码：{{ shareInfo.OrangeKey }}
        </h5>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  // eslint-disable-next-line vue/require-default-prop
  // eslint-disable-next-line vue/require-prop-types
  props: ['logoUrl', 'qrcodeUrl', 'shareInfo', 'userStatus'],
  data () {
    return {
      traningContent: this.$store.state.instInfo.Industry.slice(0, 10).join('　'),
      // eslint-disable-next-line import/no-webpack-loader-syntax
      // slogan: require('!!url-loader!../../assets/share/slogan.png'),
      // eslint-disable-next-line import/no-webpack-loader-syntax
      // posterPic: require('!!url-loader!../../assets/share/poster-pic.jpg'),
      picLoadedCount: 0,
    }
  },
  methods: {
    onImageLoaded () {
      // 页面两张图片加载完后开始绘制
      if (this.picLoadedCount++ >= 1) {
        this.$nextTick(() => {
          console.log('onImageLoaded')
          this.$emit('templateLoaded')
        })
      }
    },
  },
})
</script>
<style lang="scss" scoped>
@function posterSize($px) {
  @return $px * 2px;
}
.share-box {
  width: posterSize(750);
  background: #f0f0f0;
}
.logo-wp {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0 posterSize(54);
}
.logo {
  max-width: posterSize(380);
  min-height: posterSize(75);
}
.slogan {
  width: posterSize(193);
}
.traning-content-box {
  display: flex;
  align-items: center;
  // width: posterSize(610);
  // height: posterSize(224);
  // padding: posterSize(20) posterSize(50) 0;
  color: #8B4700;
  font-size: posterSize(30);
  // background: #f0f0f0 url("~assets/share/content-bg.png") 50% 50%/cover;
  line-height: posterSize(42);

  width: 100%;
  height: posterSize(160);
  padding: 5px posterSize(50) posterSize(30);
}
.content-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-left: posterSize(15);
  border-left: 1px solid #8B4700;
}
.content-prompt {
  font-size: posterSize(28);
  color: #8B4700;
  margin-bottom: posterSize(10);
}
.poster-img {
  display: block;
  width: posterSize(750);
  margin-bottom: posterSize(34);
}
.my-info-wp {
  text-align: center;
}
.qrcode {
  width: posterSize(270);
  height: posterSize(270);
}
.my-info {
  width: 100%;
  text-align: center;
}
.intro {
  color: #333;
  font-size: posterSize(30);
  white-space: nowrap;
  margin-top: posterSize(23);
}
.invite-code {
  color: #000;
  font-size: posterSize(36);
  margin-top: posterSize(14);
  white-space: nowrap;
}
</style>
